﻿@page "/autocompletes"
@inject IStringLocalizer<AutoCompletes> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
    <p>@Localizer["P1"]</p>
    <div style="width: 200px;">
        <AutoComplete Items="@StaticItems" IsSelectAllTextOnFocus="true" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="LikeMatch">
    <p>@Localizer["P2"]</p>
    <div style="width: 200px;">
        <AutoComplete Items="@StaticItems" IsLikeMatch="true" IgnoreCase="false" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="NoDataTip">
    <p>@((MarkupString)Localizer["P3"].Value)</p>
    <div style="width: 200px;">
        <AutoComplete Items="@StaticItems" NoDataTip="@Localizer["AutoTip"]" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="ValueChanged">
    <p>@Localizer["P4"]</p>
    <div style="width: 200px;">
        <AutoComplete Items="@Items" ValueChanged="@OnValueChanged" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="ShowLabel">
    <p>@((MarkupString)Localizer["P5"].Value)</p>
    <Divider Text="@Localizer["Divider1Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm Model="@Model">
        <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" />
    </ValidateForm>
    <Divider Text="@Localizer["Divider2Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="false" />
    <Divider Text="@Localizer["Divider3Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" DisplayText="@Localizer["AutoText"]" ShowLabel="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["DebounceTitle"]" Introduction="@Localizer["DebounceIntro"]" Name="Debounce">
    <p>@Localizer["DebounceDetails"]</p>
    <div style="width: 200px;">
        <AutoComplete Items="@Items" ValueChanged="@OnValueChanged" Debounce="500" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["OnSelectedItemChangedTitle"]" Introduction="@Localizer["OnSelectedItemChangedIntro"]" Name="OnSelectedItemChanged">
    <AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged"></AutoComplete>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
